<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>动画练习</title>
<script src="ui/js/jquery.min.js"></script>
<style type="text/css">
#move {
	margin-left: -200px;
	width: 60px;
	height: 40px;
	background-color: red;
}
</style>
<body>
	<div id='move'>
		<button type='button' id='b1'>move</button>
	</div>
	<button type='button' id='active'>active</button>
	<button type='button' id='active2'>active2</button>
	<img id='img' src='ui/images/move.png' alt='active' />
	<script type="text/javascript">
		$('#active2').on('click', function() {
			console.log('sfs');
			$('#move').animate({
				marginLeft : '0px',
			}, 'slow', function() {
				$('#move').css('margin-left', -200);
			});
			$('#move').animate({
				background : '#551A8B',
				opacity : '0.5'
			}, 'slow', function() {
				$('#move').css('margin-left', -200);
			});
			$('#move').animate({
				width: '200px'
			}, 'slow', function() {
				$('#move').css('margin-left', -200);
			});
		});
		document.getElementById('img').onmouseover = function() {
			$('#img').attr('src', 'ui/images/h5.png');
		};
		$('#img')[0].onmouseout = function() {
			$('#img').attr('src', 'ui/images/move.png');
		};
		$('#active').on('click', function() {
			console.log("fff");
			var margin = $('#move').offset().left;
			var style = $('#move')[0].style;
			var style1 = document.getElementById('move');
			var margin2 = style1.marginleft;
			console.log(margin2);
			change(0);
		});
		var timer = [];
		function change(target) {
			var margin = $('#move').offset().left;
			/* if (margin == 0) {
				clearInterval(timer);
			} */
			//$('#move').css('margin-left',margin+200);
			timer = setInterval(function() {
				var margin1 = $('#move').offset().left;
				if (parseInt(margin1) > target) {
					//console.log("sfsdsf");
					clearInterval(timer);
				}
				$('#move').css('margin-left', margin1 + 10);
				console.log(margin1);
			}, 30);
		};
	</script>
</body>
</html>